import { defineComponent, onMounted, reactive, watch } from "vue";
import { $commonCategory } from "@/apis/api";
import to from "await-to-js";
export default defineComponent({
  emits: ['confirm'],
  setup(props, { expose, emit }) {
    const state = reactive({
      // 打开选择器的标记索引
      index: 0,
      // 选择器开关
      is_show: false,
      // 选择器当前选中值
      value: [] as any[],
      // 选择器可选列表
      columns: [],
    })
    onMounted(async () => {
      const [err, res]: any = await to($commonCategory({
        type: 'sys_family_relation'
      }))
      if (!err) {
        state.columns = res.data;
      }
    })
    // 打开弹窗
    const open = ({identity }: { identity: any }) => {
      state.value = identity;
      state.is_show = true;
    }
    // 关闭弹窗
    const close = () => {
      state.is_show = false;
    }
    // 关闭弹窗回调
    const closed = () => {
      state.index = 0;
      state.value = [];
    }
    // 监听到弹窗关闭触发回调
    watch(() => state.is_show, (nv) => {
      if (!nv) {
        closed();
      }
    })
    expose({
      open,
      close,
    })
    return () => (
      <nut-popup position="bottom" v-model:visible={state.is_show}>
        <nut-picker field-names={{ text: 'dict_label', value: 'dict_code' }} v-model={state.value} columns={state.columns} title="请选择与缴费人关系" onConfirm={(e: any) => { emit("confirm", { index: state.index, identity: e.selectedOptions[0] }) }} onCancel={() => state.is_show = false}></nut-picker>
      </nut-popup>
    )
  }
})